<template>
	<view class="container">
		<uv-navbar auto-back title="课时明细" placeholder bgColor="transparent"/>
		<view class="h-15"></view>
		<!-- 筛选 -->
		<view class="pl-15">
			<uv-tabs :list="[{ name: '全部', keys: {} }, { name: '30分钟', keys: {'classHourType': 1} }, { name: '60分钟', keys: {'classHourType': 2}}, { name: '体验课', keys: {'classHourType': 4}} ]" @change="handleTab" />
		</view>
		<view class="h-15" />
		<scroll-view class="container" scrollY @scrolltolower="loadmore">
			<view class="px-30 bg-white mx-30 rd-20 py-15 box-shadow" v-if="flowlist.length">
				<view class="py-30" style="border-bottom: 1px solid #f8f8f8;" v-for="item,index in flowlist">
					<view class="flex items-center justify-between text-30">
						<view>{{item.type?.name}}({{item.classHourType?.name}})</view>
						<view>
							<text class="text-FF5252" v-if="item.beforeNumber - item.afterNumber > 0">{{item.afterNumber - item.beforeNumber}}</text>
							<text class="text-40D563" v-else>{{'+' + (item.afterNumber - item.beforeNumber)}}</text>
						</view>
					</view>
					<view class="flex items-center justify-between text-26 text-999 mt-10">
						<view>{{item.description}} {{item.createdAt.replace(/^\d{4}-/, '')}}</view>
						<view>剩余：{{item.afterNumber}}</view>
					</view>
				</view>
			</view>
			<view class="h-10"></view>
			<view v-if="!flowlist.length" style="height: 100%;" class="flex-1 flex items-center justify-center">
				<uv-empty icon="/static/empty.svg" />
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { usePagination } from '@/common/hooks/usePagination'
import { onLoad } from '@dcloudio/uni-app';
import { loglist_api } from '@/common/apis/other.js'

let requestQuery = ref({})

const {
	list: flowlist,
	loadmore,
	message,
	loading,
	refresh
} = usePagination(loglist_api, {
	defaultParam: requestQuery.value,
	auto: true
})

const handleTab = async event => {
	requestQuery.value = event.keys;
	await refresh(requestQuery.value);
};
</script>

<style scoped lang="scss">
</style>